<script src="/js/clipboard.min.js"></script>
<style type="text/css">
.user-top-content {
	width: 100%;
    height: 120px;
    background: #F6EEE6;
    margin-bottom: 30px;
    position: relative;
}
.user-main-left {
    width: 492px;
    background: #FFFCF9;
    border-radius: 2px;
    height: 100px;
    margin-right: 10px;
    display: inline-block;
    padding: 10px;
    letter-spacing: 1px;
}
.user-main-center {
    width: 169px;
    background: #FFFCF9;
    border-radius: 2px;
    height: 90px;
    vertical-align: top;
    margin-top: 5px;
    margin-right: 10px;
    display: inline-block;
    padding: 10px;
}
.user-main-right {
    width: 210px;
    background: #FFFCF9;
    border-radius: 2px;
    height: 90px;
    vertical-align: top;
    margin-top: 5px;
    margin-right: 10px;
    display: inline-block;
    padding: 10px;
    line-height: 22px;
    letter-spacing: 1px;
}
.user-main-left .main-top {
    width: calc(100% - 62px);
    height: 52px;
    line-height: 25px;
    padding-left: 62px;
    position: relative;
}
.user-main-left .main-top .user-photo {
	width: 52px;
	height: 52px;
    position: absolute;
    left: 0;
}
.user-main-left .main-top .username {
	font-size: 16px;
	color: #626262;
}
.user-main-left .main-top .level {
	font-size: 12px;
	color: #53CAE3;
}
.user-main-left .main-top .point-number {
	font-size: 12px;
	color: #757575;
}
.user-main-left .main-top .point {
	font-size: 12px;
	color: #A8A8A8;
}
.user-main-left .main-top .point-bar {
    display: inline-block;
}
.user-main-left .main-top .point-bar .progress-bar {
    display: inline-block;
    width: 80px;
    height: 10px;
    background: #C1C1C1;
    box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.34);
    border-radius: 2px;
    cursor: pointer;
    overflow: hidden;
}
.user-main-left .main-top .point-bar .progress-bar span{
    float: left;
    height: 10px;
    background: #32ACFC;
}
.user-main-left .main-top .point-bar .progress-bar:hover .progress-empirical{
    background:  #84C273;
}
.user-main-left .main-top .point-bar .progress-bar:hover .progress-blogpromotion{
	background: #F85050;
}
.user-main-left .main-top .point-bar .progress-bar:hover .progress-creativity{
    background:  #F0B927;
}
.user-main-left .main-top .point-bar .tip{
    width: 205px;
    height: 25px;
    background: #FFFFE6;
    padding: 5px;
    font-size: 12px;
    color: #646464;
    border: 0.5px solid #D9D9D9;
    border-radius: 1px;
    position: absolute;
    display: none;
    z-index: 10;
}
.user-main-left .main-top .point-bar:hover .tip{
    display:  block;
}
.user-main-left .main-top .point-bar .tip span{
    width:  20px;
    display: inline-block;
    padding-left: 5px;
}
.small-font {
	font-size: 12px;
	color: #757575;
}
.main-bottom {
	margin-top: 10px;
}
.main-bottom  label{
    vertical-align: top;
    font-size: 12px;
    color: #A8A8A8;
    margin-right: 22px;
}
.main-bottom .medal {
    width: 280px;
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}
.main-bottom .medal li {
	float: left;
    width: 41px;
    position: relative;
}
.main-bottom .medal li img {
	width: 27px;
	height: auto;
}
.main-bottom .medal li .show-introd {
	 position: absolute;
	 background: #FFFFE6;
     padding: 5px;
     font-size: 12px;
     color: #646464;
     border: 0.5px solid #D9D9D9;
     border-radius: 1px;
     width: 100px;
     left: -40px;
     top: 30px;
     display: none;
     z-index: 10;
     line-height: 18px;
}
.main-bottom .medal li:hover .show-introd {
     display: block;
}
.medal-number{
	display: inline-block;
    line-height: 20px;
    font-size: 10px;
    color: #7E7E7E;
    letter-spacing: 2px;
    text-align: center;
}
.medal-more{
	color: #53CAE3;
}
.user-main-center label{
    font-size: 12px;
    color: #424242;
    font-weight: bold;
}
.user-main-center ul li {
    float: left;
    width: 56px;
    height: 65px;
    line-height: 30px;
    font-size: 12px;
    color: #7E7E7E;
    text-align: center;
    margin-top: 8px;
    letter-spacing: 1px;
}
.user-main-center ul li:nth-of-type(even) span{
    display: inline-block;
    width: 100%;
    border-right: 1px solid #D5D5D5;
    border-left: 1px solid #D5D5D5;
    height: 20px;
    line-height: 20px;
}
.user-main-center ul li span{
	font-size: 14px;
	color: #262626;
}
.user-main-right .sign-title {
    font-size: 12px;
    color: #424242;
    font-weight: bold;
}
.user-main-right .signinday {
	font-size: 16px;
	color: #515151;
	font-weight: bold;
}
.user-main-right span{
	font-size: 12px;
	color: #B0B0B0;
}
.user-button {
    background: #FFFFFF;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.33);
    border-radius: 1px;
    border: 1px;
    font-size: 12px;
    color: #707070;
    width: 40px;
    height: 20px;
    cursor: pointer;
    letter-spacing: 1px;
}
.close-button {
    position: absolute;
    top: 5px;
}
.system-button {
    position: absolute;
    top: 30px;
}
.active-button {
	background: #D9D9D9;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.33);
	border-radius: 1px;
}
.hide-close.user-top-content {
	overflow: hidden;
}
.uid {
	display: inline-block;
    float: right;
}
.uid .uid-number{
	font-size: 12px;
	color: #8C8C8C;
	margin-right: 20px;
}
.hide-close.user-top-content .uid {
	float: none;
    margin-left: 20px;
}
.copy {
    cursor: pointer;
}
/* 移动端 */
@media screen  and (max-width: 850px),@media screen  and (orientation: landscape),
only screen  and (max-device-width: 850px) {
    body {
        padding-top: 0!important;
    }
    .main {
    	padding-top: 0!important;
    }
    .fly-main {
   	    width: 100%;
    }
    .user-top-content {
   	    background: transparent;
        height: auto;
        margin-bottom: 0.213333rem;
    }
    .user-main-left {
        padding: 0;
    	width: 100%;
    	background: transparent;
   	    height: auto;
        margin-right: 0;
    }
    .user-main-left .main-top {
	    width: calc(100% - 3.1rem);
	    padding: 0.6rem;
	    padding-left: 2.5rem;
	    background: #fff;
        height: auto;
        line-height: 1.4;
	}
	.main-bottom{
		width: calc(100% - 1.2rem);
	    padding: 0.6rem;
	    background: #fff;
        margin-top: 0.213333rem;
	}
	.user-main-left .main-top .user-photo {
       left: 0.6rem;
       top: 0.3rem;
       width: 1.6rem;
       height: 1.6rem;
       border-radius: 1rem;
       margin-right: 0.1rem;
	}
	.user-main-left .main-top .username {
		font-size:  0.426667rem;
		color: #262626;
	}
    .user-main-left .main-top .level, 
    .user-main-left .main-top .point-number,
    .small-font,
    .user-main-left .main-top .point-bar .tip {
        font-size: 0.32rem;
    }
    .main-bottom label {
        font-size: 0.373333rem;
        color: #3FA1EE;
        display: block;
    }
    .main-bottom .medal {
        margin-top:  0.426667rem;
    }
    .main-bottom .medal li img {
        width: 0.8rem;
        height: 0.8rem;
        max-width: 0.8rem;
        border-radius: 0.4rem;
    }
    .mobile-sign {
    	width: 1.6rem;
	    height: 0.7rem;
	    border-radius: 0.8rem;
        padding: 0.026667rem;
        position: absolute;
	    top: 0.6rem;
	    right: 0.6rem;
        background-image: linear-gradient(335deg, #6840E0 0%, #29D5F6 100%);
    }
    .mobile-sign .signInA {
        width: 100%;
	    display: inline-block;
	    height: 100%;
	    line-height: 0.7rem;
	    text-align: center;
	    background: #fff;
	    border-radius: 0.4rem;
	    color: #4298ed;
    }
    .mobile-tip {
    	display: block;
    	margin-left: 0.7rem;
    }
    .user-main-left .main-top .point-bar .progress-bar {
    	width: 2.24rem;
    	height: 0.224rem;
    }
    .user-main-left .main-top .point-bar .progress-bar span {
    	height: 0.224rem;
    }
    .user-info-list .ul-li span {
     	font-size: 0.373333rem!important;
    }
}
</style>
<div class="goBack" onclick="window.location.href=document.referrer">
	<i class="layui-icon">&#xe603;</i>  
	<span>返回</span>
	<span class="title-name">${titleName!"个人中心"}</span>
</div>
<div class="user-top-content <#if user.usertype?? && user.usertype == "0">layui-hide</#if>">
	<div class="user-main-left">
		<div class="main-top">
			<img class="user-photo" alt="" src="/${user.fileurl!''}"  onerror="this.src='/images/user/default.jpg';this.onerror=null">
			<label class="username">${user.username!''}</label>
			<span class="level">lv${user.grade.grade!''}.${user.grade.groups!''}</span>
			<a href="/user/integralRule.html" target= _blank class="point mobile-display-none">查看积分规则</a>
			<div class="uid layui-hide">
				<span class="uid-number">uid：<span id="uidCopy">345345</span></span><span id="copyButton" class="copy level">复制</span>
			</div>
			<br>
			<span class="point-number">总分</span>
			<div class="point-bar">
				<#assign point="${user.grade.maximum!'0'}">
				<span class="progress-bar">
					<span class="progress-empirical" style="width: <#if point!='0'  >${(user.empirical?number/point?number)*80}px;<#else>0</#if>"></span>
					<span class="progress-blogpromotion" style="width: <#if point!='0'>${( user.blogpromotion?number/point?number )*80}px;<#else>0</#if>"></span>
					<span class="progress-creativity" style="width: <#if point!='0'>${(user.creativity?number/point?number  )*80}px;<#else>0</#if>"></span>
				</span>
				<div class="tip">经验值<span style="color:#84C273">${user.empirical!'0'}</span> 宣传力 <span  style="color:#F85050">${user.blogpromotion!'0'}</span>创造力<span style="color:#F0B927">${user.creativity!'0'}</span></div>
			</div>
			<span class="small-font"> ${point} <span class="mobile-tip">(再获${point?number - user.empirical - user.blogpromotion - user.creativity }分，即可升级)</span></span>
			<#if user??>
			<#assign signinBool=user.signin?string("yes","no") />
			<div class="mobile-sign pc-display-none <#if user.usertype?? && user.usertype == '0'>layui-hide</#if> <#if signinBool=='no'>unsign</#if>">
				<#if signinBool=="yes">
				<a class="signInA" href="javascript:">
					已签到
				<#else>
				<a class="signInA" href="javascript:" onclick="signInMobile()">
					签到
				</#if>
				</a>
			</div>
			<#else>
			<div class="mobile-sign unsign pc-display-none">
				<a  href="/login.html">
					签到
				</a>
			</div>
			</#if>
		</div>
		<div class="main-bottom">
			<label>已领取勋章</label>
			<div class="medal">
				<ul>
					<li><img alt="" src="/res/gradeFile/${user.grade.fileurl!''}.html"><div class="show-introd">${user.grade.groups!''}<br>等级达到${user.grade.grade!''}级获得</div></li>
				</ul>
			</div>
			<div class="medal-number mobile-display-none">
				<span>已获得1枚勋章</span><br><a class="medal-more">查看全部勋章</a>
			</div>
		</div>
	</div>
	<div class="user-main-center mobile-display-none">
		<label>我的</label>
		<div>
			<ul>
				<li><span>${user.topicCount!'0'}</span><br>发帖数</li>
				<li><span>${user.commentCount!'0'}</span><br>回帖数</li>
				<li><span>${user.fans!'0'}</span><br>粉丝数</li>
			</ul>
		</div>
	</div>
	<div class="user-main-right mobile-display-none" >
		<span class="sign-title">签到</span><br>
		<label class="signinday">已连续签到：${user.signinday}天</label><br>
		<span class="signinnumber">累计签到总天数：<#if user.integration!=0>${user.integration/2}<#else>0</#if>天</span><br>
		<span class="signintime">上次签到时间：<#if user.signintime??>${user.signintime?string('yyyy-MM-dd HH:mm')}<#else>无</#if></span>
	</div>
	<button class="user-button close-button mobile-display-none">折叠</button>
</div>
<script>
$(".close-button").click(function(){
	$(".user-top-content").toggleClass("hide-close");
	$(".close-button").toggleClass("active-button");
	if($(".close-button").hasClass("active-button")){
		$(".close-button").text("展开");
		 $(".user-top-content").animate({height:'40px'});
		 $(".hide-close.user-top-content .user-main-center,.hide-close.user-top-content .user-main-right,.hide-close.user-top-content .system-button").animate({opacity:'0'});
		 $(".hide-close.user-top-content .user-main-left .main-top .user-photo").animate({width:'28px',height:'28px'});
		 $(".hide-close.user-top-content .user-main-left .main-top").animate({paddingLeft:'40px'});
		 $(".hide-close.user-top-content .uid").animate({float:'none'});
	}else {
		 $(".close-button").text("折叠");
		 $(".user-top-content").animate({height:'120px'});
		 $(".user-main-center, .user-top-content .user-main-right, .system-button").animate({opacity:'1'});
		 $(".user-top-content .user-main-left .main-top .user-photo").animate({width:'52px',height:'52px'});
		 $(".user-top-content .user-main-left .main-top").animate({paddingLeft:'62px'});
		 $(".user-top-content .uid").animate({float:'right'});
		 
	}
});

var clipboard = new Clipboard('#copyButton', {
    text: function() {
    	var s = $("#uidCopy").text();
        return s;
    }
});
clipboard.on('success', function(e) {
	layer.msg('复制成功!', {icon:1});
});

clipboard.on('error', function(e) {
	layer.msg('复制失败请重新操作!', {icon:2});
});

//签到
function signInMobile(){
	$(".mobile-sign .signInA").attr("onclick","");
	$.ajax({
	        type: "POST",
	        url: "/user/signin",
	        data: {},
	        success: function(data){
	        	if(data.signin == "success"){
	        		$(".mobile-sign .unsign").removeClass("unsign");
	        		$(".mobile-sign a").text("已签到");
	        		$(".mobile-sign .integration").text(data.integration);
	        	}
	        }
	    });
	
}
</script>